'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8866 // dev port
module.exports = {
  // build后的输出目录
  outputDir: 'dist',
  publicPath: './',
  lintOnSave: false, // 设置是否在开发环境下每次保存代码时都启用eslint验证，false 不启用
  // 使用productionSourceMap，打包时生成map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，
  // 但相应的包的体积也会变大，将其设置为false则不生成.map文件
  productionSourceMap: false,
  devServer: {
    // 服务器主机名，如果允许外部访问，可设置为 "0.0.0.0" 也可设置成你的ip地址
    host: '0.0.0.0',
    port: port,         // 端口
    open: false,        // 运行项目是否直接打开浏览器， true 是，false 否
    overlay: {
      warnings: false,
      errors: true
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    // 前端应用和后端api服务器没有运行在一个主机时，需要在开发环境将api代理到api服务器
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.BASE_API,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API ]: ''
        }
      },
    }
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    },
  },
  configureWebpack: {
    name: 'vue2后台管理系统',
    // devtool 添加这个debugger可以看源码
    devtool: 'cheap-module-source-map',
    resolve: {
      // 设置文件夹别名
      alias: {
        '@': resolve('src'),
        '@static': resolve('public/static')
      }
    }
  },
  /**
   * 修改网页标题，方法一
   */
  // pages: {
  //   index: {
  //     entry: 'src/main.js', // 入口文件
  //     title: '模拟后台管理系统'
  //   }
  // },

  /**
   * 修改网页标题，方法二
   */
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = '模拟后台管理系统'
      return args
    })

    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },

}
